import React, { useState } from 'react';
import * as echarts from 'echarts';

export interface ChartProps {
  text?: string;
  width?: number;
  height?: number;
  data?: any;
  freshNum?: 1;
}
let theChat: any = React.createRef();
const EChartYibiao: React.FC<ChartProps> = (props: ChartProps) => {
  React.useEffect(() => {
    const myChart = echarts.init(theChat);
    let val = props.data.useOSS / 1024 / 1024;
    const option = {
      title: {
        text: props.text,
        textStyle: {
          fontSize: 14,
          fontWeight: 'bold',
        },
      },
      series: [
        {
          type: 'gauge',
          max: props.data ? (props.data.osS_Capacity < 100 ? 100 : props.data.osS_Capacity) : 100,
          progress: {
            show: true,
            width: 10,
          },
          axisLine: {
            lineStyle: {
              width: 10,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            distance: 0,
            length: 8,
            lineStyle: {
              width: 1,
              color: '#999',
            },
          },
          axisLabel: {
            distance: 14,
            color: '#999',
            fontSize: 11,
          },
          anchor: {
            show: true,
            showAbove: true,
            size: 20,
            itemStyle: {
              borderWidth: 10,
            },
          },
          title: {
            show: false,
          },
          detail: {
            valueAnimation: true,
            fontSize: 18,
            offsetCenter: [0, '70%'],
            formatter: function (value: any) {
              return value.toFixed(0) + 'G';
            },
          },
          data: [
            {
              value: val,
            },
          ],
        },
      ],
    };
    // 绘制图表
    myChart.setOption(option);
  }, [props.freshNum, props.data]);
  return <div ref={(ref) => (theChat = ref)} style={{ height: props.height }}></div>;
};
export default EChartYibiao;
